<template>
  <div class="login-container">
    <div class="login-weaper">
      <div class="login-weaper-left">
        <div class="login-main">
          <div class="login-img" style="font-size: 30px">注册</div>
          <div class="upload-avatar">
            <div class="upload-button">
              <label class="upload-img-btn" for="upload-img">
                <a-icon type="plus" />
              </label>
              <input id="upload-img" type="file" @change="upload_img">
            </div>
            <a-avatar :src="form.avatar" :size="70" shape="square" v-show="form.avatar"
            style="position: absolute;left: 0;"></a-avatar>
          </div>

          <a-form-model ref="ruleForm" :model="form" :rules="rules">
            <a-form-model-item prop="nickname">
              <a-input v-model="form.nickname" placeholder="请输入昵称">
                <img src="~@/assets/sign/icon1.jpg" slot="prefix">
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="username" class="item-password">
              <a-input v-model="form.username" placeholder="请输入用户名">
                <img src="~@/assets/sign/icon1.jpg" slot="prefix">
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="password" class="item-password">
              <a-input v-model="form.password" type="password" placeholder="请输入密码">
                <img src="~@/assets/sign/icon2.jpg" slot="prefix">
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="repassword" class="item-password">
              <a-input v-model="form.repassword" type="password" placeholder="请输入确认密码">
                <img src="~@/assets/sign/icon2.jpg" slot="prefix">
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="code" class="item-password">
              <a-input v-model="form.code" type="password" placeholder="请输入验证码">
                <img src="~@/assets/sign/icon2.jpg" slot="prefix">
                <img :src="imgBase64" alt="code" title="点击切换验证码" @click="changeCode" slot="suffix">
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="submit" class="loginBtn" html-type="submit"
                :loading="loginBtn"
                :disabled="loginBtn">注册</a-button>
              <div class="SLA">
                <a href="/login">登录</a>
              </div>
            </a-form-model-item>
          </a-form-model>
          <div class="cropper-img-box" v-if="cropper_box_mark == true">
              <vueCropper
              ref="cropper"
              :img="cropperData.img"
              :autoCrop="cropperData.autoCrop"
              :autoCropWidth="cropperData.autoCropWidth"
              :autoCropHeight="cropperData.autoCropHeight"
              :fixedBox="cropperData.fixedBox"
            ></vueCropper>
            <div class="cropper-img-tool">
              <a-button type="warning" icon="left" shape="circle" @click="rotateRight"></a-button>
              <a-button type="danger" icon="close" shape="circle" @click="cropper_box_mark = false"></a-button>
              <a-button type="primary" icon="check" shape="circle" @click="finish"></a-button>
              <a-button type="warning" icon="right" shape="circle" @click="rotateLeft"></a-button>
            </div>
            </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import {getCode} from '@/api/code'
import { VueCropper } from 'vue-cropper'

export default {
  name: 'register',
  components: {
    VueCropper
  },
  data () {
    return {
      loginBtn: false,
      form: {
        username: '',
        password: ''
      },
      rules: {
        nickname: [{ required: true, message: '昵称不能为空' }],
        username: [{ required: true, message: '账号不能为空' }],
        password: [{ required: true, message: '密码不能为空' }],
        password: [{ required: true, message: '密码不能为空' }],
      },
      imgBase64: '',
      cropper_box_mark: false,
      cropperData: {
        img: '',
        autoCrop: true,
        autoCropWidth: 400,
        autoCropHeight: 400,
        fixedBox: true
      },
    }
  },
  created () {
    this.getCode()
  },
  methods: {
    ...mapActions(['Register']),
    async getCode() {
      let res = await getCode()
      if (res.code === 200) {
        this.imgBase64 = res.data.image
        this.form.code_token = res.data.token
      }
    },
    changeCode () {
      this.getCode()
    },
    upload_img (e) {
      let obj = e.target
      let file = obj.files[0]
      let temArr = file.name.split('.')
      let file_suffix = temArr[temArr.length - 1]
      if (file_suffix !== 'jpg' && file_suffix !== 'png' && file_suffix !== 'jpeg') {
        alert('上传图片失败，目前只支持jpg,png,jpeg的图片!')
        return
      }
      let reader = new FileReader()
      let _self = this
      reader.onload = function (ev) {
        _self.cropperData.img = ev.target.result
        _self.cropper_box_mark = true
      }
      reader.readAsDataURL(file)
    },
    rotateRight () {
      this.$refs.cropper.rotateRight()
    },
    rotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    finish () {
      this.$refs.cropper.getCropData((data) => {
        this.form.avatar = data
        this.cropper_box_mark = false
      })
    },
    // handler
    submit(e) {
      e.preventDefault()
      if (!this.form.avatar) {
        this.getCode()
        this.form.code = ''
        return this.$message.error('别忘记上传头像')
      }
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loginBtn = true
          this.Register(this.form).then(() => {
            this.$store.commit('SET_INFO', this.form)
            this.$router.push({ path: '/' })
          }).finally(() => {
            this.loginBtn = false
          })
        } else {
          setTimeout(() => {
            this.loginBtn = false
          }, 10000)
        }
      })
    },
  }
}
</script>

<style lang="less">

@import '~ant-design-vue/es/style/themes/default.less';
.login-container{
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  background: url("~@/assets/sign/bg.jpg") no-repeat;
  .login-weaper {
    position: relative;
    margin: 0 auto;
    width: 1216px;
    height: 788px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 28px;
    background: url('~@/assets/sign/img.png') no-repeat #fff;
    background-position: right;
  }
  .login-weaper-left{
    width: 608px;
    background: #fff;
    height: 788px;
    border-radius: 28px;
    padding-top: 90px;
    .login-main{
      width: 393px;
      margin: 0 auto;
      .login-img{
        text-align: center;
      }
    }
    .ant-form{
      padding-top: 48px;
      .ant-form-item{
        margin-bottom: 0px;
      }
      .ant-input{
        font-size: 16px;
        height: 45px;
        line-height: 45px;
        border-radius: 17px;
        border: none;
        box-shadow: 0 5px 13px rgba(72, 123, 252, 0.23);
        padding-left: 60px;
      }
      .ant-input-prefix{
        left: 25px;
      }
      .ant-form-explain{
        position: absolute;
        left: 25px;
        padding-top: 10px;
      }
      .item-password{
        margin: 38px 0 28px 0;
      }
      .loginBtn{
        font-size: 21px;
        height: 45px;
        line-height: 45px;
        width: 100%;
        border-radius: 17px;
        border: none;
        box-shadow: 0 5px 13px rgba(11, 42, 135, 0.23);
      }
    }
  }
}
.loginBtn{
  background: #474eb6;
}
.SLA{
  font-size: 12px;
  color: #999a9a;
  text-align: center;
  padding-top: 4px;
  span{
    color: #0b2a87;
  }
}
.upload-avatar{
  position: absolute;
  top: 80px;
  left: 500px;
}
.upload-avatar .upload-button {
  display: inline-block;
}
.upload-avatar .upload-button .upload-img-btn{
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 70px;
  display: inline-block;
  width: 70px;
  line-height: 70px;
  text-align: center;
}
.upload-avatar .upload-button #upload-img{
  display: none;
  opacity: 0;
}
.cropper-img-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;z-index: 9;
}
.cropper-img-tool {
  position: absolute;
  z-index: 2;
  bottom: 50px;
  left: 0;
  text-align: center;
  width: 100%;
  .ant-btn{
    margin: 0 5px;
  }
}
</style>
